
<template>
  <!--    导航栏-->
  <el-row>
    <el-col :span="24">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>质量管理</el-breadcrumb-item>
        <el-breadcrumb-item>常见缺陷</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>
<!--  搜索栏-->
  <el-row style="margin-top: 15px">
    <el-col :span="24">
      <el-form inline :model="defeceQuery" label-width="auto" >
        <el-form-item label="缺陷名称">
          <el-input clearable placeholder="请输入内容" v-model="defeceQuery.defeceName"></el-input>
        </el-form-item>
        <el-form-item label="质量检测类型">
          <el-select clearable placeholder="请选择" style="width: 120px" v-model="defeceQuery.defeceType">
            <el-option label="尺寸" :value="1"></el-option>
            <el-option label="外观" :value="2"></el-option>
            <el-option label="重量" :value="3"></el-option>
            <el-option label="性能" :value="4"></el-option>
            <el-option label="成分" :value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="缺陷等级">
          <el-select clearable placeholder="请选择" style="width: 120px" v-model="defeceQuery.defeceLevel">
            <el-option label="致命缺陷" :value="1"></el-option>
            <el-option label="严重缺陷" :value="2"></el-option>
            <el-option label="轻微缺陷" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" >查询</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
<!--  工具栏-->
  <el-row style="margin-top: 15px">
    <el-col :span="24">
      <el-button type="primary"  @click="addDefece">新增</el-button>
      <el-button type="primary" >修改</el-button>
      <el-button type="primary" @click="bathDeleteDefece">删除</el-button>
    </el-col>
  </el-row>
<!--  内容栏-->
  <el-row style="margin-top: 15px">
    <el-col :span="24" >
      <el-table :data="defeces" border style="width: 100%" @selection-change="selectDefece">
        <el-table-column type="selection" width="55" ></el-table-column>
        <el-table-column prop="defeceName" label="缺陷描述" width="180"></el-table-column>
        <el-table-column prop="defeceType" label="质量检测类型" width="180">
          <template #default="scope">
            {{scope.row.defeceType==1?'尺寸':scope.row.defeceType==2?'外观':scope.row.defeceType==3?'重量':scope.row.defeceType==4?'性能':'成分'}}
          </template>
        </el-table-column>
        <el-table-column prop="defeceLevel" label="缺陷等级" width="180">
          <template #default="scope">
            {{scope.row.defeceLevel==1?'致命缺陷':scope.row.defeceLevel==2?'严重缺陷':'轻微缺陷'}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="scope">
            <el-button type="text" icon="el-icon-edit" @click="editDefece(scope.row.defeceId)">修改</el-button>
            <el-button type="text" icon="el-icon-delete" @click="deleteDefece(scope.row.defeceId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
<!--  分页栏-->
  <el-row style="margin-top: 15px">
    <el-col :span="24">
      <el-pagination @change="changePage" background layout="prev, pager, next" :total="total"/>
    </el-col>
  </el-row>
<!--  新增按钮弹窗-->
  <el-dialog title="新增缺陷" v-model="dialogVisible" width="50%" align-center>
    <el-form label-width="130px">
      <el-form-item label="缺陷描述">
        <el-input placeholder="请输入缺陷描述" v-model="newDefece.defeceName"></el-input>
      </el-form-item>
      <el-form-item label="质量检测类型">
        <el-select placeholder="请选择" style="width: 120px" v-model="newDefece.defeceType">
          <el-option label="尺寸" :value="1"></el-option>
          <el-option label="外观" :value="2"></el-option>
          <el-option label="重量" :value="3"></el-option>
          <el-option label="性能" :value="4"></el-option>
          <el-option label="成分" :value="5"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="缺陷等级">
        <el-select placeholder="请选择" style="width: 120px" v-model="newDefece.defeceLevel">
          <el-option label="致命缺陷" :value="1"></el-option>
          <el-option label="严重缺陷" :value="2"></el-option>
          <el-option label="轻微缺陷" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitAddDefece" >确定</el-button>
        <el-button @click="cancelAddDefece">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
<!--  编辑弹窗-->
  <el-dialog title="编辑缺陷" v-model="dialogVisibleUpdate" width="50%" align-center>
    <el-form label-width="130px">
      <el-form-item label="缺陷描述">
        <el-input v-model="selectDefeceById.defeceName"></el-input>
      </el-form-item>
      <el-form-item label="质量检测类型">
        <el-select style="width: 120px" v-model="selectDefeceById.defeceType">
          <el-option label="尺寸" :value="1"></el-option>
          <el-option label="外观" :value="2"></el-option>
          <el-option label="重量" :value="3"></el-option>
          <el-option label="性能" :value="4"></el-option>
          <el-option label="成分" :value="5"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="缺陷等级">
        <el-select style="width: 120px" v-model="selectDefeceById.defeceLevel">
          <el-option label="致命缺陷" :value="1"></el-option>
          <el-option label="严重缺陷" :value="2"></el-option>
          <el-option label="轻微缺陷" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="updateDefece">确定</el-button>
        <el-button @click="cancelUpdateDefece">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import {ref,onMounted} from 'vue';
import {useRouter,useRoute} from "vue-router";
import {ElMessage} from "element-plus";
import defeceRequest from "@/api/defece/defece.js";
const route = useRoute();
const router = useRouter();
// 封装查询对象
let defeceQuery = ref({});
let defeces = ref([]);
let curPage = ref(1);
let total = ref(0);
// 封装新增对象
let newDefece = ref({});
// 新增弹窗
let dialogVisible = ref(false);
// 根据id查询缺陷信息
let selectDefeceById = ref([]);
// 编辑弹窗
let dialogVisibleUpdate = ref(false);
// 封装被选择的缺陷的id
let defeceById = ref([]);
// 获取被选择缺陷的id
function selectDefece(queryTable){
  let listDefece = new Array();
  queryTable.forEach(item=>{
    listDefece.push(item.defeceId);
    defeceById.value = listDefece;
  })
}
// 根据id进行批量删除
function bathDeleteDefece(){
  for (let i = 0; i < defeceById.value.length; i++){
    deleteDefece(defeceById.value[i])
  }
}
// 删除按钮的点击事件
function deleteDefece(defeceId){
  defeceRequest.loadDeleteDefeceById(defeceId,res=>{
    if (res.code==200){
      ElMessage({
        message: "删除成功",
        type: "success"
      })
    }
    loadDdfeces();
  })
}
// 编辑弹窗的取消按钮事件
function cancelUpdateDefece(){
  dialogVisibleUpdate.value = false;
  loadDdfeces();
}
// 编辑弹窗的确定按钮事件
function updateDefece(){
  defeceRequest.loadUpdateDefece(selectDefeceById.value,res=>{
    if (res.code==200){
      ElMessage({
        message: "修改成功",
        type: "success"
      })
    }
    dialogVisibleUpdate.value = false;
    loadDdfeces();
  })
}
// 编辑按钮的点击事件
function editDefece(defeceId){
  defeceRequest.loadSelectDefeceById(defeceId,res=>{
    selectDefeceById.value = res.data;
    dialogVisibleUpdate.value = true;
    console.log(selectDefeceById.value)
  })
}
// 新增按钮的点击事件
function addDefece(){
  dialogVisible.value = true;
}
// 新增弹窗的确定按钮点击事件
function submitAddDefece(){
  defeceRequest.addDefece(newDefece.value,res=>{
    if (res.code==200){
      ElMessage({
        message: "添加成功",
        type: "success"
      })
    }
    dialogVisible.value = false;
    newDefece.value = {};
    loadDdfeces();
  })
}
// 新增弹窗的取消按钮点击事件
function cancelAddDefece(){
  dialogVisible.value = false;
}
// 加载项目列表
function loadDdfeces(){
  defeceRequest.loadDefeces(defeceQuery.value,curPage.value,10,res=>{
    total.value = res.data.total;
    defeces.value = res.data.list;
    console.log(defeces.value)
})
}
// 分页事件
function changePage(value){
  curPage.value = value;
  loadDdfeces();
}
onMounted(()=>{
  loadDdfeces();
})
</script>
<style scoped>

</style>